<script>
  import $ from '../dfish.js'
  import {h} from 'vue'
  import WidgetBase from './WidgetBase.vue'
  import ButtonBar from './ButtonBar.vue'
  import TabButton from './TabButton.vue'
  import Swiper from './Swiper.vue'
  import SwiperItem from './SwiperItem.vue'

  export default {
    name: 'w-tabs',
    mixins: [WidgetBase],
    props: ['current', 'position', 'gap'],
    methods: {
      x_default() {
        return {
          position: 'top',
          gap: 0
        }
      },
      html_slots() {
        let buttons = []
        let pages = []
        this.slots_children().forEach((v, i) => {
          if (!v.props || v.props.key == null) {
            $.lodash.set(v, 'props.key', i)
          }
          buttons.push(h(TabButton,  v.props))
          pages.push(h(SwiperItem, {lazy: v.props.lazy == null ? true : v.props.lazy, key: v.props.key}, v.children))
        })
        return [
          h(ButtonBar, {
            class: 'w-tabs-buttonbar',
            current: this.x.current,
            gap: this.x.gap,
            scrollX: this.x.scrollX,
            scrollY: this.x.scrollY,
          }, {default: () => buttons}),
          h(Swiper, {class: 'w-tabs-swiper f-flex-1 f-oh', current: this.x.current}, {default: () => pages}),
        ]
      }
    },
    computed: {
      html_class() {
        return 'f-oh f-flex' + (this.x.position === 'top' || this.x.position === 'bottom' ? '-column' : '')
      }
    }
  }
</script>

<style>

</style>
